<template>
  <div class="settlementRecord">
    <el-card>
      <!-- 导航 -->
      <div class="nav">
        <div class="left">
          <p class="details">账务明细</p>
          <p class="money">账户总金额：{{ money }}元</p>
          <p class="detailsMoney">
            可提现金额：{{ pushMoney }}元, 冻结中金额： {{ pullMoney }}元
          </p>
          <p class="title">
            当结算单生成后，将会从账户中扣除对应的可提现金额，结算<br />单在双方确认且审核完毕后将会打款到您的支付宝账号
          </p>
        </div>
        <div class="right">
          <el-button @click="payAccount">设置支付宝提现账号</el-button>
          <el-button @click="pushAccount" type="primary"
            >提交提现审核</el-button
          >
        </div>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <div class="searchVal">
          <el-date-picker
            style="margin-right: 20px"
            v-model="TimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="focus"
          >
          </el-date-picker>
        </div>
        <el-button @click="searchDetails">查询</el-button>
      </div>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column align="center" prop="create_time" label="提交时间">
        </el-table-column>
        <el-table-column align="center" prop="order_number" label="业务单号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="withdrawal_account"
          label="提现账号"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="withdrawal_money"
          label="提现金额"
        >
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{
              scope.row.state == 0
                ? "待审核"
                : scope.row.state == 1
                ? "已通过"
                : "已驳回"
            }}
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 设置支付宝提现账号 -->
    <el-dialog
      title="设置支付宝提现账号"
      :visible.sync="dialogTableVisible"
      width="30%"
    >
      <el-form :model="form">
        <el-form-item label="支付宝账号" :label-width="formLabelWidth">
          <el-input v-model="form.account" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitPay">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 提交审核 -->
    <el-dialog
      title="提交提现审核"
      :visible.sync="dialogTableVisibles"
      width="30%"
    >
      <el-form :model="form">
        <el-form-item label="支付宝账号" :label-width="formLabelWidth">
          <el-input
            disabled
            v-model="formA.account"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input disabled v-model="formA.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="提现金额" :label-width="formLabelWidth">
          <el-input
            v-model="formA.payMoney"
            oninput="value=value.replace(/[^0-9.]/g,'')"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <p>可提现余额 {{ pushMoney }}</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles = false">取 消</el-button>
        <el-button type="primary" @click="submitPush">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  unionList_api,
  payAccount_api,
  unionSettleApplyAdd_api,
  AdminUnionUnionDetails,
} from "@/api/union";
export default {
  components: { Pagination },
  data() {
    return {
      TimeVal: "", //时间日期选择
      //   日期时间选择器数组
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      timeStart: "", //开始时间
      timeEnd: "", //结束时间
      money: "", //账户金额
      pushMoney: "", //提现金额
      pullMoney: "", //冻结金额

      tableData: [], //表格
      loading: false,
      page: 1, //当前页
      pageSize: 15, //当前页条数
      total: 0, //总计

      obj: {},
      formLabelWidth: "100px",
      dialogTableVisible: false,
      form: {
        account: "",
        name: "",
      },
      dialogTableVisibles: false,
      formA: {
        account: "",
        name: "",
        payMoney: "",
      },
    };
  },
  created() {
    this.obj = JSON.parse(localStorage.getItem("unionId"));
    this.getUnionList();
    this.getLabor();
  },
  methods: {
    //获取开始/结束时间
    focus(time) {
      if (!this.TimeVal) {
        this.TimeVal = [];
      }
      this.timeStart = this.TimeVal[0];
      this.timeEnd = this.TimeVal[1];
    },
    // 获取工会金额
    async getLabor() {
      let { code, data } = await AdminUnionUnionDetails({
        id: this.obj.id,
        phone: "",
      });
      if (code == 0) {
        this.money = data[0].total_money;
        this.pushMoney = data[0].withdrawal_money;
        this.pullMoney = this.money - this.pushMoney;
      }
    },
    // 获取列表
    async getUnionList() {
      this.loading = true;
      let { code, data } = await unionList_api({
        union_id: this.obj.id,
        union_name: this.obj.name,
        state: "",
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.timeStart,
        endTime: this.timeEnd,
      });
      if (code == 0) {
        this.tableData = data.list;
        this.total = parseInt(data.total);
        this.loading = false;
        this.tableData.forEach((item) => {
          this.form.account = item.withdrawal_account;
          this.form.name = item.withdrawal_name;
        });
      }
    },
    // 设置提现
    payAccount() {
      this.dialogTableVisible = true;
    },
    // 确认提现
    async submitPay() {
      let { code, data } = await payAccount_api({
        id: this.obj.id,
        withdrawal_account: this.form.account,
        withdrawal_name: this.form.name,
      });
      if (code == 0) {
        this.$message({
          message: "设置支付宝提现账号成功",
          type: "success",
        });
        this.dialogTableVisible = false;
      }
    },
    // 提交审核
    pushAccount() {
      this.dialogTableVisibles = true;
      this.formA.account = this.form.account;
      this.formA.name = this.form.name;
    },
    // 确认审核
    submitPush() {
      if (this.formA.payMoney < "50") {
        this.$message({
          message: "不能输入少于50的金额",
          type: "warning",
        });
        return;
      }
      if (this.pullMoney < "50") {
        this.$message({
          message: "可提现余额必须超过50元才能提现",
          type: "warning",
        });
        return;
      }

      this.$confirm("是否确认提交?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await unionSettleApplyAdd_api({
            union_id: this.obj.id,
            withdrawal_account: this.formA.account,
            withdrawal_name: this.formA.name,
            withdrawal_money: this.formA.payMoney,
          });
          if (res.code == 0) {
            this.$message({
              type: "success",
              message: "提交提现审核成功，将在1-3天工作日打款到你的提现账号上!",
            });
            this.dialogTableVisibles = false;
            this.getUnionList();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    getList() {
      this.getUnionList();
    },
    searchDetails() {
      this.getUnionList();
    },
  },
};
</script>

<style lang="less" scoped>
.settlementRecord {
  .nav {
    margin: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .left {
      .details {
        font-weight: bold;
      }
      .money {
        font-size: 20px;
      }
      .title {
        font-size: 14px;
        letter-spacing: 1px;
      }
    }
  }
  margin: 30px;
  height: 100%;
  .search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 30px;
    .searchVal {
      display: flex;
      p {
        width: 80px;
        text-align: center;
        border: 1px solid #dcdfe6;
        border-right: 0px;
        height: 40px;
        line-height: 20px;
        margin: 0px;
        background: #f5f7fa;
        color: #909399;
        font-size: 14px;
        padding: 10px;
        border-radius: 4px 0px 0px 4px;
      }
    }
    /deep/.el-input {
      width: 260px;
      margin-right: 30px;
    }
    /deep/.el-button {
      margin-left: 30px;
    }
  }
}
.head {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>